<template>
  <div>
    <el-dialog
      title="推送专家"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="800px"
      @closed="resetForm('form')"
    >
      <div>
        <div class="course-info">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="title" label="标题">
              <template slot-scope="{ row }">
                {{ row.sysCourse.title }}
              </template>
            </el-table-column>
            <el-table-column prop="team" label="教师团队">
              <template slot-scope="{ row }">
                {{ row.sysCourse.team }}
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建日期">
            </el-table-column>
          </el-table>
        </div>
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="选择专家" prop="expertsUserList">
            <div class="user-wrap">
              <p v-show="initialValue.userId.length == 0">请选择人员</p>
              <el-tag
                v-for="tag in initialValue.userId"
                :key="tag.userName"
                closable
                disable-transitions
                @close="handleClose(tag)"
              >
                {{ tag.userName }}
              </el-tag>
            </div>
            <el-button
              class="user-select-button"
              icon="iconfont icon-addrole"
              type="custom"
              plain
              @click="handleSelect()"
            >
              选择人员
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="custom" v-preventReClick @click="submitForm('form')"
          >提 交</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <UserSelect
      ref="userSelect"
      :initialValue="initialValue"
      @e-userData="setUserId"
    />
  </div>
</template>
<script>
import {
  expertsTaskAdd,
  expertsTaskVerify,
} from "@/api/admin/audit/expertsTask.js";
import Bus from "@/utils/bus.js";
export default {
  components: {
    UserSelect: () => import("@/components/userSelect"),
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      form: {
        expertsTaskVO: "", //扩展字段（课程id）
        expertsUserList: [], //专家集合
        status: "1", //状态，1-待评审，2-评审完成
        taskType: "1", //任务类型： 1-推送，2-会议
        flowTaskId: "",
      },
      rules: {
        expertsUserList: [
          { required: true, message: "请选择专家", trigger: "blur" },
        ],
      },
      initialValue: {
        userId: [],
      },
    };
  },
  mounted() {
    Bus.$on("pushSpecialist", (v) => {
      this.tableData = [];
      this.tableData.push(v);
      this.form.flowTaskId = v.id;
      this.form.expertsTaskVO = {
        courseType: v.courseType,
        courseId: v.sysCourse.id,
        nodeId: v.nodeId,
        definitionCode: v.definitionCode,
      };
      this.dialogVisible = true;
    });
  },
  beforeDestroy() {
    Bus.$off("pushSpecialist");
  },
  methods: {
    setUserId(v) {
      this.initialValue.userId = [];
      if (v.hasOwnProperty("userId")) {
        this.initialValue.userId = v.userId;
      } else {
        this.initialValue.userId.push(v);
      }
      this.handleVerify();
    },
    handleClose(row) {
      this.initialValue.userId = this.initialValue.userId.filter(
        (v) => v.id != row.id
      );
    },
    //提交
    submitForm(form) {
      this.form.expertsUserList = this.initialValue.userId;
      if (!this.form.expertsUserList.length) {
        this.$message({
          message: "请选择专家",
          type: "warning",
        });
        return;
      }
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.add();
        }
      });
    },
    //新增
    add() {
      expertsTaskAdd(this.form).then((res) => {
        if (!res || res.data.code != 0) return;
        this.dialogVisible = false;
        this.$message({
          message: "操作成功",
          type: "success",
        });
      });
    },
    //验证是否已推送专家
    handleVerify() {
      this.form.expertsUserList = this.initialValue.userId;
      expertsTaskVerify(this.form).then((res) => {
        // console.log(res);
      });
    },
    handleSelect() {
      Bus.$emit("userSelect");
    },
    //重置表单
    resetForm(form) {
      this.$refs[form].resetFields();
      this.initialValue.userId = [];
      this.form.expertsTaskVO = {};
      this.form.expertsUserList = [];
      this.form.status = "1";
      this.form.taskType = "1";
    },
  },
};
</script>
<style scoped>
.course-info {
  margin-bottom: 20px;
}
.user-wrap {
  display: inline-block;
  width: 560px;
  border: 1px solid #dcdfe6;
  border-radius: 5px;
  overflow: hidden;
  min-height: 40px;
  cursor: not-allowed;
}
.user-wrap p {
  line-height: 40px;
  color: #bbb;
  text-indent: 10px;
}
.user-wrap span {
  margin: 0 5px;
}
.user-select-button {
  float: right;
  padding-right: 10px;
  cursor: pointer;
}
.user-select-button span {
  font-size: 28px;
  color: #930b0b;
}
</style>